<!--
 * @Author: taosong
 * @Date: 2022-10-21 13:24:34
 * @LastEditors: taosong
 * @LastEditTime: 2022-11-04 10:48:05
 * @Description: taosongs
-->
<template>
  <div>
    <m-infinite
      v-model="loading"
      :isFinished="isFinished"
      @onLoad="getPexelsListData"
    >
      <m-waterfall
        class="w-full p-1"
        :data="pexelsList"
        :column="isMobileTerminal ? 2 : 5"
        :picturePreReading="false"
      >
        <template v-slot="{ item, width }">
          <item-vue :data="item" :width="width" @click="toPinsClick"></item-vue>
        </template>
      </m-waterfall>
    </m-infinite>
    <!-- 详情内容展示 -->
    <transition
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <pins-vue v-if="isVisablePins" :id="currentPins.item.id"></pins-vue>
    </transition>
  </div>
</template>

<script setup>
import { getPexelsData } from '@/api/pexels.js'
import { ref } from '@vue/reactivity'
import { isMobileTerminal } from '@/utils/flexible.js'
import ItemVue from './item.vue'
import { watch } from '@vue/runtime-core'
import { useStore } from 'vuex'
import pinsVue from '@/views/pins/components/pins.vue'
import gsap from 'gsap'
import { useEventListener } from '@vueuse/core'

const store = useStore()
/**
 * 构建数据请求
 */
let query = {
  page: 1,
  size: 20
}

const pexelsList = ref([])

// 是否在进行加载
const loading = ref(false)

// 是否加载完成
const isFinished = ref(false)

// 加载数据
const getPexelsListData = async () => {
  if (isFinished.value) {
    return
  }
  if (pexelsList.value.length > 0) {
    query.page += 1
  }
  const { list, total } = await getPexelsData(query)
  if (query.page === 1) {
    pexelsList.value = list
  } else {
    pexelsList.value.push(...list)
  }
  if (pexelsList.value.length === total) {
    isFinished.value = true
  }
  loading.value = false
}

// 当选中item 改变之后重新筛选；列表
const resetQuery = (newQuery) => {
  query = { ...query, ...newQuery }
  isFinished.value = false
  pexelsList.value = []
}

// 监听分类选中分类变化
watch(
  () => store.getters.currentCategory,
  (val) => {
    resetQuery({
      page: 1,
      categoryId: val.id
    })
  }
)

// 监听搜索文本变化
watch(
  () => store.getters.searchText,
  (val) => {
    resetQuery({
      page: 1,
      searchText: val
    })
  }
)

// 控制pins展示
const isVisablePins = ref(false)
// 当前选中的pins属性
const currentPins = ref({})
// 跳转详情页
const toPinsClick = (obj) => {
  // 改变浏览器url并不真正跳转
  const { item, location } = obj
  history.pushState(null, null, `/pins/${item.id}`)
  isVisablePins.value = true
  currentPins.value = obj
}

/** 监听浏览器回退点击事件 */
useEventListener(window, 'popstate', () => {
  isVisablePins.value = false
})

// 进入前
const beforeEnter = (el) => {
  gsap.set(el, {
    scaleX: 0,
    scaleY: 0,
    transformOrigin: '0 0',
    // 这是触发动画的中心位置
    translateX: currentPins.value.location?.translateX,
    translateY: currentPins.value.location?.translateY,
    opacity: 0
  })
}

// 进入最终
const enter = (el, done) => {
  gsap.to(el, {
    scaleX: 1,
    scaleY: 1,
    translateX: 0,
    translateY: 0,
    opacity: 1,
    duration: 0.3,
    onComplete: done
  })
}
// 离开
const leave = (el, done) => {
  gsap.to(el, {
    scaleX: 0,
    scaleY: 0,
    translateX: currentPins.value.location?.translateX,
    translateY: currentPins.value.location?.translateY,
    opacity: 0,
    duration: 0.3,
    onComplete: done
  })
}
</script>
<style lang="scss" scoped></style>
